
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>过滤器的使用</title>
    <style>
        span{padding-right: 2em;}
    </style>
</head>
<body>

<div id="view"></div>

<script id="list" type="text/tpl">
<h1><%it.title%></h1>
<p><%it.desc || "暂无描述"%></p>
<ul>
    <%@ it.list val i%>
    <li>
        <span><%i%></span>
        <span>昵称: <%val.name|test%></span>
        <span>城市: <%val.city%></span>
        <span>职位: <%val.post%></span>
        <span>时间: <%val.time | date:"yyyy-MM-dd" | test%></span>
    </li>
    <%@%>
</ul>
</script>


<script src="../src/bt.ext.js"></script>
<script src="../src/filters.js"></script>
<script>
var data = {
    title: "前端屌丝群成员",
    list: [
        {name: "乱码",       city: "杭州", post: "前端", time: 1435650377},
        {name: "冰花",       city: "北京", post: "水军", time: 1435650377},
        {name: "高琦",       city: "福建", post: "水军", time: 1435650377},
        {name: "银狐",       city: "汕头", post: "前端", time: 1435650377},
        {name: "辛巴",       city: "深圳", post: "前端", time: 1435650377},
        {name: "龙秋明",     city: "北京", post: "前端", time: 1435650377},
        {name: "小麒麟",     city: "北京", post: "前端", time: 1435650377},
        {name: "秋天的落叶", city: "广东", post: "前端", time: 1435650377}
    ]
};

/** 使用过滤器功能，请调用扩展版 **/
// 先注册过滤器，然后使用。
// 为字符加上中括号
bt.filter("test", function (str) {
    return "[" + str + "]";
});

/** 修改默认配置 */
bt.config({
    begin   : "<%", // 模板起始标签
    end     : "%>", // 模板闭合标签
    varname : "it", // 对象替换符
    strip   : false // 保留空白字符
});

// 得到模版
var tpl = document.getElementById("list").innerHTML;
document.getElementById("view").innerHTML = bt(tpl).render(data);
</script>
</body>
</html>